<template>
	<view class="content">
		<heade title="商品参照" cross bg_color="bg_fff">
			<text class="iconfont icon-shaixuan f-s20 f-wbold"></text>
			<text class="iconfont icon-erweima m-l5 f-s20 f-wbold"></text>
		</heade>
		<view class="">
			<view :style="{'top':($common.headHeight() + 43) + 'px'}" class="position-fixed box_box  bg_fff   p-t5" style="width: 100%;z-index: 9;">
				<view class="d-flex align-center justify-content-space-between p-b10 p-l20 p-r20" style="border-bottom: 2rpx solid #F2F2F2;">
					<view class="d-flex align-center">
						<view class="f-s15">分类</view>
						<view class="iconfont icon-sanjiaoxing f-s8 m-l10"></view>
					</view>
					<view class="sousuo border-r12 d-flex align-center">
						<view class="iconfont icon-sousuo f-s14 m-l10"></view>
						<input type="text" class="f-s14 m-l10 flex1" placeholder="搜索客户名称|助记码|编码|电话">
					</view>
					<view class="iconfont icon-erweima f-s20"></view>
				</view>
				<view class="d-flex align-center justify-content-space-around " style="border-bottom: 2rpx solid #F2F2F2;">
					<view class="position-relative p-t10 p-b10" @tap="countClick(i)" v-for="(item,i) in textList">
						<view class="f-s14 f-w500" :class="count == i?'co_64acff':''">{{item}}</view>
						<view class="xiaobiank" v-if="count == i"></view>
					</view>
				</view>
			</view>
			<view style="height: 172rpx;"></view>
			
			<view class=" ">
				<view class="p-b8 m-t10 p-l15" style="border-bottom: 10rpx solid  #F3F2F7;" v-for="item in goodsList">
					<view class="f-s14 f-wbold">[{{item.Code}}] {{item.Name}} {{item.Specification}}</view>
					<view class="d-flex m-t10">
						<image src="../../static/logo.png" mode="" class="" style="width: 132rpx;height: 132rpx;"></image>
						<view class="m-l10 flex1 m-r10 position-relative">
							<view class=" d-flex align-center justify-content-space-between" style="width: 480rpx;">
								<view class="f-s12 co_999">现存量: <text class="co_000 m-l5">0.00袋</text>	 </view>
								<view class="f-s12 co_999">可用量: <text class="co_000 m-l5">0.00袋</text>	 </view>
							</view>
							<view class=" d-flex align-center justify-content-space-between m-t12" style="width: 480rpx;">
								<view class="f-s12 co_999 d-flex align-items-start">
									<view class="co_000">单价</view>
									<view class="p-b5 p-l5" style="width: 170rpx;border-bottom: 2rpx solid #999;">
										<input type="text" class="f-s12  box_box"  placeholder="请输入"> 
									</view>
								</view>
								<view class="f-s12 co_999 d-flex align-items-start">
									<view class="co_000">数量</view>
									<view class="p-b5 p-l5" style="width: 170rpx;border-bottom: 2rpx solid #999;">
										<input type="text" class="f-s12  box_box"  placeholder="请输入"> 
									</view>
								</view>
							</view>
							
							<view class="position-absolute" style="right: 0;top: 6rpx;">
								<view class="d-flex justify-content-center">
									<view class="iconfont d-inline-block icon-31xiala f-wbold co_64acff f-s14" @tap="$common.url('/pages/product/details?stauts=true')" style="transform: rotate(270deg);"></view>
								</view>
								<view class="d-flex align-center justify-content-center m-t15" @tap="$common.url('/pages/product/details')" style="width: 60rpx;height: 60rpx;background: #F8F7EB;border-radius: 50%;">
									<view class="iconfont icon-gouwuche co_64acff f-s14 f-wbold"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="position-fixed" style="right: 20rpx;bottom: 80rpx;" @tap="$common.url('/pages/shoppingCart/shoppingCart')">
				<view class="gouwucheClass d-flex align-center justify-content-center position-relative">
					<view class="iconfont icon-gouwuche f-s25 co_64acff f-wbold"></view>
					<view class="shuzhi position-absolute d-flex align-center justify-content-center f-s10">0</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:0,
				textList:['全部','近60天','新品'],
				goodsList:[],
				Code:'010100003',
				Name:'瓜'
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				let resData = {
					Code:this.Code,
					Name:this.Name
				}
				this.$http.get('valet_order/inventory_lists',resData).then(res => {
					if(res.code == 1) {
						this.goodsList = res.data.list
					}
				})
			},
			// 顶部tab栏切换
			countClick(i) {
				this.count = i
			}
		}
	}
</script>

<style lang="scss">
	.xiaobiank{
		position: absolute;
		bottom: -2rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 44rpx;
		height: 2rpx;
		background: #64acff;
	}
	.gouwucheClass{
		width: 100rpx;
		height: 100rpx;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0px 2rpx 8rpx 0px rgba(111, 111, 111, 0.19);
	}
	.shuzhi{
		right: -6rpx; 
		top: -16rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #fff;
		border: 2rpx solid #D3CFD0;
		color: red;
	}
</style>